<template>
	<!-- 更多 跳转到tabBar open-type="reLaunch"-->
	<navigator v-if="isMore" class="wrapper" url="/pages/classify/index" open-type="reLaunch">
		<image class="w-full h-full" src="../../static/wallpaper/classify1.jpg" mode="aspectFill"></image>
		<view class="w-full h-full absolute top-0 left-0 backdrop-blur-md flex flex-col justify-center items-center">
			<uni-icons type="more-filled" size="30" color="#fff" />
			<view class="text-white">更多</view>
		</view>
	</navigator>
	<!-- 封面 -->
	<navigator v-else class="wrapper" :url="`/pages/classList/index?id=${data._id}&title=${data.name}`">
		<image class="w-full h-full" :src="data.picurl" mode="aspectFill"></image>
		<view v-if="formatTimeDifference(data.updateTime)" class="px-2 py-1 absolute top-0 left-0 rounded-br-md bg-orange-500 opacity-90 backdrop-blur-md text-white text-[24rpx]">
			{{ formatTimeDifference(data.updateTime) }}更新
		</view>
		<view class="w-full h-[70rpx] absolute bottom-0 left-0 center bg-[rgba(0,0,0,0.2)] backdrop-blur-md text-white">{{ data.name }}</view>
	</navigator>
</template>

<script setup>
	import { formatTimeDifference } from '@/utils'
	defineProps({
		data: {
			type: Object,
			default: () => ({
				id: '01',
				picurl: '../../static/wallpaper/classify1.jpg',
				updateTime: Date.now() - 1000 * 60
			})
		},
		isMore: { type: Boolean, default: false }
	})
</script>

<style scoped>
	.wrapper {
		@apply h-[340rpx] rounded-md overflow-hidden relative;
	}
</style>
